<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>笑话</title>
  </head>
  <body>
    <strong>请输入自定义的名字:</strong>
    <input id="name" type="text" placeholder="李雷" /><br />
    <input name="countrytype" checked type="radio" value= '0'/>公制
    <input name="countrytype" type="radio" value= '1' />美制
    <br />
    <button onclick=generate()>随机生成笑话</button>
    <div id="joking" class="joking" >

    </div>
    <script>
      let placearr = ["肯德基", "白宫", "迪士尼"];
      let actionarr = ["变成了一坨泥","变成了鼻涕虫爬走了","自燃了"];
      function generate(){
        let name = document.getElementById("name").value;
        let radioObj = document.getElementsByName("countrytype");
        let selectedValue;
        for(let i= 0; i<radioObj.length; i++){
            if(radioObj[i].checked){
                selectedValue=radioObj[i].value;
            }
        }
        let jokObj = document.getElementById('joking');
        let num1 = Math.floor(Math.random()*3) ;
        let num2 = Math.floor(Math.random()*3);
        jokObj.innerText="今天气温35"+ (selectedValue === "0" ? "摄氏度" : "华氏度") + "大老爹出门散步。当走到"+placearr[num1]+"门前时,突然"+actionarr[num2]+"人们都惊呆了，"+
    (name.trim() === ''? '李雷' : name.trim() )+"全程目睹但并没有慌，因为大老爹是一个"+ (selectedValue === "0" ? "140斤" : "309磅") +"的胖子，天气又辣么热。"
      }
    </script>

    <style>
       .joking{
        width: 200px;
        height: 200px;
        background-color: green;
       }
    </style>
  </body>
</html>
